<%--
  Created by IntelliJ IDEA.
  User: 衰草寒烟
  Date: 2017/1/13
  Time: 14:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>

<%@include file="../../inc/top.jsp"%>
<script src="<%=ctxpath%>/static/d3/d3.min.js"></script>
<script src="<%=ctxpath%>/static/jtopo/jtopo-0.4.8-min.js"></script>
<%--<script src="http://d3js.org/d3.v3.min.js"></script>--%>

<div class="container">
    <br/>
    <table>
        <tr>
            <td width="30%">
                <h3>OA办公系统</h3>
            </td>
            <td>
                <svg></svg>
            </td>
        </tr>
    </table>

    <%--<canvas id="canvas" width="800" height="600"></canvas>--%>
        <script type="text/javascript" charset="utf-8">
            /*jQuery(document).ready(function(){
                var canvas = document.getElementById('canvas');
                var stage = new JTopo.Stage(canvas);
                //显示工具栏
                //showJTopoToobar(stage);
                var scene = new JTopo.Scene();
                stage.add(scene);
                scene.background = '/static/img/bg.jpg';

                var cloudNode = new JTopo.Node('root');
                cloudNode.setSize(30, 26);
                cloudNode.setLocation(460, 280);
                cloudNode.layout = {type: 'circle', radius: 160};

                scene.add(cloudNode);

                for(var i=0; i<3; i++){
                    var node = new JTopo.CircleNode('host' + i);
                    node.fillStyle = '200,255,0';
                    node.radius = 15;
                    node.setLocation(scene.width * Math.random(), scene.height * Math.random());
                    if(i == 2){
                        node.layout = {type: 'tree', direction: 'top', width: 50, height: 90};
                    }else if(i == 1){
                        node.layout = {type: 'tree', direction: 'left', width: 50, height: 90};
                    }else{
                        node.layout = {type: 'circle', radius: 60};
                    }


                    scene.add(node);
                    var link = new JTopo.Link(cloudNode, node);
                    scene.add(link);

                    for(var j=0; j<6; j++){
                        var vmNode = new JTopo.CircleNode('vm-' + i + '-' + j);
                        vmNode.radius = 10;
                        vmNode.fillStyle = '255,255,0';
                        vmNode.setLocation(scene.width * Math.random(), scene.height * Math.random());
                        scene.add(vmNode);
                        scene.add(new JTopo.Link(node, vmNode));
                    }
                }
                JTopo.layout.layoutNode(scene, cloudNode, true);

                scene.addEventListener('mouseup', function(e){
                    if(e.target && e.target.layout){
                        JTopo.layout.layoutNode(scene, e.target, true);
                    }
                });
            });*/

            //d3
            var nodes = [   { name: "局域网办公用户" },{name: "局域网办公用户" },
                { name: "OA协同服务器" }, { name: "互联网" },
                { name: "远程办公用户" }, { name: "无线网" },
                { name: "手机办公用户" }, { name: "手机办公用户" }];

            var edges = [   { source : 0 , target: 2 } , { source : 1 , target: 2 } ,
                { source : 2 , target: 3 } , { source : 3 , target: 4 } ,
                { source : 3 , target: 5 } , { source : 5 , target: 6 },
                { source : 5 , target: 7 }];
            var width = 800;
            var height = 600;
            var svg = d3.select("svg")
                .attr("width",width)
                .attr("height",height);
            var force = d3.layout.force()
                .nodes(nodes) //指定节点数组
                .links(edges) //指定连线数组
                .size([width,height]) //指定作用域范围
                .linkDistance(150) //指定连线长度
                .charge([-900]); //相互之间的作用力
            force.start();

            //添加连线
            var svg_edges = svg.selectAll("line")
                .data(edges)
                .enter()
                .append("line")
                .style("stroke","#ccc")
                .style("stroke-width",1);

            var color = d3.scale.category20();

            //添加节点
            var svg_nodes = svg.selectAll("circle")
                .data(nodes)
                .enter()
                .append("circle")
                .attr("r",20)
                .style("fill",function(d,i){
                    return color(i);
                })
                .call(force.drag);  //使得节点能够拖动

            //添加描述节点的文字
            var svg_texts = svg.selectAll("text")
                .data(nodes)
                .enter()
                .append("text")
                .style("fill", "black")
                .attr("dx", 20)
                .attr("dy", 8)
                .text(function(d){
                    return d.name;
                });
            force.on("tick", function(){ //对于每一个时间间隔
//更新连线坐标
                svg_edges.attr("x1",function(d){ return d.source.x; })
                    .attr("y1",function(d){ return d.source.y; })
                    .attr("x2",function(d){ return d.target.x; })
                    .attr("y2",function(d){ return d.target.y; });

//更新节点坐标
                svg_nodes.attr("cx",function(d){ return d.x; })
                    .attr("cy",function(d){ return d.y; });

//更新文字坐标
                svg_texts.attr("x", function(d){ return d.x; })
                    .attr("y", function(d){ return d.y; });
            });
        </script>

</div>
<%@include file="../../inc/bottom.jsp"%>